<template>
  <div class="coursecart">
  <div class="loading" v-if="loading">loading</div>
  <div class="error" v-if="error">error</div>
  <br>
  <br>
  <br>
  <br>
  {{all_groupjrtz===null?'':'' }}
   <!-- <p v&#45;bind:class="{active:isActive}">dsssss{{ all_groupjrtz  }}</p> -->
   {{localdata===null?'':''}}
    <!-- <panel header="图文组合列表" :footer="footer" :list="localdata" type="1"> -->
    <!-- <!&#45;&#45; <img :src="i.cover"   alt="" /> &#45;&#45;> -->
    <!-- <!&#45;&#45; <icon type="waiting" is&#38;#45;msg></icon> &#45;&#45;> -->
    <!-- <!&#45;&#45; <div   slot="plus" :testing="bbbbs" > &#45;&#45;> -->
    <!-- <!&#45;&#45;   <span  @click="iji(item)">B</span> &#45;&#45;> -->
    <!-- <!&#45;&#45;   <!&#38;#45;&#38;#45; <div   v&#38;#38;#45;if="as==true" class="choice"> &#38;#45;&#38;#45;> &#45;&#45;> -->
    <!-- <!&#45;&#45;   <!&#38;#45;&#38;#45;   222 &#38;#45;&#38;#45;> &#45;&#45;> -->
    <!-- <!&#45;&#45;   <!&#38;#45;&#38;#45;   <div class="choicebtn "></div> &#38;#45;&#38;#45;> &#45;&#45;> -->
    <!-- <!&#45;&#45;   <!&#38;#45;&#38;#45; </div> &#38;#45;&#38;#45;> &#45;&#45;> -->
    <!-- <!&#45;&#45;   <div class="choice" > &#45;&#45;> -->
    <!-- <!&#45;&#45;     <div @click="addbtn($event,list)" class="choicebtn "></div> &#45;&#45;> -->
    <!-- <!&#45;&#45;   </div> &#45;&#45;> -->
    <!-- <!&#45;&#45; </div> &#45;&#45;> -->
    <!-- </panel> -->
    <!-- {{CreateKnowledgeGroupOrder.postData}} -->
    {{all_zhangcarts==null?'':''}}
<a  v-for="item in localdata" @click.prevent="onItemClick(item)" class="weui-media-box weui-media-box_appmsg">
          <div class="weui-media-box__hd" v-if="item.cover">
            <img class="weui-media-box__thumb" :src="item.cover" alt="">
          </div>
          <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">{{item.title}}</h4>
            <p class="weui-media-box__desc">{{item.intro}}</p>
          </div>
          <!-- <div   @click="buy(item.purchased)"> -->
          <div  class="preclass"    :class="{ selected: item.purchased }">
<!--  @click="toggle($event)"   -->
            <!-- <span v&#45;if="!item.purchased">{{item.purchased}} 11</span> -->
            <!-- <slot name="plus" ></slot> -->

              <div class="choice" >
                <div @click="addbtn($event,item.id,item.price)" class="choicebtn "></div>
              </div>
          </div>
        </a>

  <!--底部结算-->
  <div class="footer">
    <div class="buy_info"><h3>￥<span class="totalprice">{{payprice}}</span></h3><span>共<span class="totalnum">0</span>套课程</span></div>
      <div class="buy_btn" v-bind:style="{backgroundColor:buybtncolor}" v-on:click="goBuyNow()">确定购买</div>
  </div>
  <!--购物车购物数量-->
  <div class="cartlogobox" v-on:click="cartlogo()">
    <!--../assets/images/buy_icon_cart0.png-->
      <div class="cartlogo"><img v-bind:src="buy_icon_cart==0?'http://m.lep365.com/images/buy_icon_cart0.png':'http://m.lep365.com/images/buy_icon_cart1.png'" /><div class="upnum">6</div></div>
  </div>

</div>
  </div>
</template>
<style lang="less" >
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';

.coursecart 	{

}

    .footer{ width:100%; height:45px; border-top:1px solid #ddd; position:fixed; bottom:53px; left:0; display:box; display:-webkit-box; background-color:#fff;}
    .footer .buy_info{ box-sizing:border-box; -webkit-box-sizing:border-box; box-flex:1; -webkit-box-flex:1; padding-left:18%;}
    .footer .buy_info h3{ font-size:20px; color:red; height:24px;}
    .footer .buy_info h3 span{ font-size:20px; color:red; height:24px;}
    .footer .buy_info span{ font-size:12px; color:#999;}
    .footer .buy_btn{ width:33%; box-sizing:border-box; -webkit-box-sizing:border-box; background-color:#b8b8b8; text-align:center; line-height:45px; color:#fff; font-size:16px;}

    .cartlogobox{ width:50px; height:50px; position:fixed; bottom:60px; left:10px; transition:height 0.3s; -webkit-transition:height 0.3s;}
    .cartlogo{ width:50px; height:50px; position:absolute; left:0px; top:0px;}
    .cartlogo img{ width:100%;}
</style>
<script>
  import { Group, Checklist, Panel, Divider, XButton, TransferDom, Icon} from 'vux'
export default {
  data () {
    return {
      buy_icon_cart:1,
      brought:false,
      payprice:0,
    localdata:"",
  loading: false,
    post: null,
      as:true,
      buybtncolor:'#aaa',
    error: null,
    coursecart:false,
    isActive:false,
    CreateKnowledgeGroupOrder: {
      actionName:'CreateKnowledgeGroupOrder',
      url:'baseapi',
      key:'zhangcarts',
      postData: {
        knowledgeGroupIds: [

        ]
      }
    },
     Querygroup:{
       actionName:"QuerySchoolContentGroupShopCart",
       url: 'baseapi',
       postData: {
       },
     CreateGroup:{
       actionName:"CreateSchoolContentGroupShopCart",
       url: 'baseapi',
       postData: {
groupID:this.cgid
         }
       }
      }
     ,
     type: '1',
      list: [{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        }
      }],
      footer: {
        title: '查看更多',
        url: 'http://vux.li'
      }
    }
    },
  created() {
    this.Getgouplist()
  },
  directives: {
    TransferDom
  },
  components: {
    Group, Checklist, Panel, Divider,
    XButton,Icon
  },
  methods: {
    goBuyNow(){
      this.$store.commit('restful_api',this.CreateKnowledgeGroupOrder)
      this.brought = true
    },

    getUrl (url) {
      return getUrl(url, this.$router)
    },
    onClickFooter () {
      this.$emit('on-click-footer')
      go(this.footer.url, this.$router)
    },
    onClickHeader () {
      this.$emit('on-click-header')
    },
    onItemClick (item) {
      this.$emit('on-click-item', item)
      // go(item.url, this.$router)
    },
    addbtn($event,num,price ){
alert(num)
      var x =false;
if (this.payprice == 0) {
  this.payprice = price;
  x =true;
}
console.info(num,price);
      if($event.target.classList.contains('choiced')){  // - -
        // alert(334)
        $event.target.classList.toggle('choiced')
        this.payprice = this.payprice - price
        // $event.target.classList.toggle('choice')
        // alert(36)
      }
      else{ //++
this.CreateKnowledgeGroupOrder.postData.knowledgeGroupIds.push(num)
if(x == true) {
this.payprice = price
  x = false;
}else {
  this.payprice = this.payprice + price

}
        $event.target.classList.toggle('choiced')
        $event.target.classList.toggle('choice')
        // alert(32)
      }
      // this.as = false
      if(this.payprice>0){// first time
        this.buybtncolor = "red"

      }else {this.buybtncolor = '#ccc'}
    },
    doits(){
      alert(3)
    },
    doit(s){
      alert(s)
    },
  Getgouplist(){
       this.$store.commit('restful_api',this.Querygroup)
    },
    addGoupToCart(){
       this.$store.commit('restful_api',this.CreateGroup)
    }
  },
  beforeDestory () {

  },
  watch: {
  },
  computed: {
    all_zhangcarts(){
      var x = this.$store.getters.all_zhangcarts;
      if (x&&this.brought == true) {
        this.$vux.alert.show({
          title:"下单结果",
          content:x.body.message
        })
       return x.body.message
      }
    },
    cgid(){
      return 3
    },

    all_groupjrtz () {
      var xx = this.$store.getters.all_groupjrtz
      if (xx) {
        this.localdata = xx.body.knowledgeGroupList;
       return xx.body.knowledgeGroupList
      }
    },
    queryGroup(){
      return this.$store.getters.all_QuerySchoolContentGroupShopCart
    }
    ,
    addedGroup(){
      return this.$store.getters.all_CreateSchoolContentGroupShopCart
    }
  },
  mounted () {
     this.$nextTick(function(){
  Event.listen("coursecart",(e) =>{
         this.$vux.alert.show({
          title: '',
          content: this.$t(e),
          onShow () {
      console.log('Plugin: I\'m showing')
          },
          onHide () {
      console.log('Plugin: I\'m hiding  now')
          }
      })

  })
     })
     this.handler = () => {
       if(this.path ==='/coursecart') {
       }
     }
  }
}
</script>

